<!-- 邀请好友绑定 -->
<template>
  <div class="page">
    <div class="intro-wrapper" :class="{'whole-height': status == 2}">
      <div>
        <img src="~assets/images/dealer/banner.png" alt="" class="banner" />
      </div>
      <div class="normal show-no-number">
        <div class="content">
          <p>金至尊会员经销商是CVNT落地应用的又一大场景，把CVNT引入到人人影视会员体系中，进一步完善CVNT的生态布局，实现CVNT的流通价值。</p>
        </div>
      </div>
      <div class="normal">
        <div class="content">
          <p>金至尊会员经销商分为钻石经销商、星耀经销商、王者经销商三个等级，享受不同价格的拿码福利。</p>
          <div class="image-wrapper">
            <img src="~assets/images/dealer/diamond1.png" alt="" /><img src="~assets/images/dealer/star1.png" alt="" /><img src="~assets/images/dealer/crown1.png" alt="" />
          </div>
        </div>
      </div>
      <div class="normal">
        <div class="content">
          <p>1、等级越高，拿升级码的价格越低；</p>
          <p>2、低等级经销商可补差价升级成高等级经销商，高等级经销商则不可逆转；</p>
          <p>3、会员经销商有效期为一年，一经售出，立即生效，不支持退换；</p>
          <p>4、一个经销商身份对应一个账号，有效期内不可修改；</p>
          <p>5、除经销商自主扩展销售渠道外，官方会给经销商提供升级码的售卖展位；</p>
          <p>6、有效期内，官方持续提供售后服务。</p>
        </div>
      </div>
    </div>
    <!--<div @touchmove.prevent class="application-wrapper" v-if="status == 1">
      <p @click="goToApplication">申请成为金至尊会员经销商</p>
    </div>-->
  </div>


</template>

<script>
  export default {
    beforeRouteEnter (to, from, next) {
      next((vm) => {
        let uid = to.query.uid;
        let token = to.query.token;
        console.log(uid, token);
        vm.uid = uid;
        vm.token = token;
      })

    },
    data () {
      return {
        type: 0,
        uid: '',
        token: '',
        status: 2,
        activeImg: '',
        showAds: false
      }
    },
    beforeCreate() {

    },
    created () {

    },
    methods: {
      getQueryVariable(variable) {
        let query = window.location.href.split('?')[1];
        let vars = query.split('&');
        for (let i = 0; i < vars.length; i++) {
          let pair = vars[i].split('=');
          if (pair[0] == variable) {
            return pair[1];
          }
        }
      },     
      showToast(msg, type) {
        const toast = this.$createToast({
          time: 2000,
          txt: msg,
          type: type
        });
        toast.show();
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '~common/scss/index.scss';
  @import "~common/scss/variable";
  @import "~common/scss/mixin";

  $color: #5A99FF;
  body {
    height: 100%;
    background: #2E3045;
  }
  .page {
    height: 100%;
    width: 100%;
    background: #2E3045;
    overflow: hidden;
  }
  .intro-wrapper{
    height:calc(100% - 98px);
    overflow-y:auto;
  }
  .whole-height{
    height:100%;
  }
  .banner {
    display: block;
    width: 100%;
    height: 472px;

  }
  .node-number{
    position: relative;
    padding-top:25px;
    height: 180px;
    margin:-212px 54px 0;
    background: url("~assets/images/node/numbg.png") no-repeat center center;
    background-size: 100% 100%;
    p{
      height:60px;
      line-height:60px;
      font-size:30px;
      text-align:center;
      color:#fefefe;
      span{
        display:inline-block;
        margin-right:2px;
        width:40px;
        height:60px;
        background:linear-gradient(0deg,rgba(6,187,241,1),rgba(17,85,198,1));
        border-radius:4px;
        font-size:48px;
      }
      span:first-child{
        margin-left:7px;
      }
      span:last-child{
        margin-right:8px;
      }
    }

    p:last-child{
      margin-top:9px;
    }
  }

  .normal{
    margin:32px 30px;
    padding:35px 39px;
    background:#424459;
    border-radius:20px;
    h4{
      display:flex;
      justify-content:space-between;
      img{
        width:16px;
        height:16px;
      }
    }
    .top-pin{
      margin-bottom:40px;
    }
    .bottom-pin{
      margin-top:32px;
    }
    h3{
      margin-bottom:29px;
      text-align:center;
      img{
        width:40px;
        height:24px;
        vertical-align:middle;
      }
      span{
        display:inline-block;
        margin:0 11px 0 12px;
        font-size:36px;
        color:#fff;
        font-weight:500;
      }
    }
    .content{
      p{
        font-size:28px;
        color:#FFE7B0;
        line-height:1.5;
      }
      .step{
        display:flex;
        align-items:center;
        height:168px;
        margin:18px 0;
        padding:0 12px 0 11px;
        font-size:24px;
        border-radius:10px;
        background:rgba(92,121,232,1);
        color:#fff;
        white-space:nowrap;
        .step1{
          flex:0.55;
        }
        .step2{
          flex:0.85;
          line-height:1.5;
          text-align:center;
        }
        .step3{
          flex:0.9;
          line-height:1.5;
          text-align:center;
        }
        .step4{
          flex:1;
          text-align:right;
        }
      }
      .image-wrapper{
        /*display:flex;*/
        width:100%;
        margin:18px 0 0;
        img{
          display:inline-block;
          width:29.33333%;
          /*max-width:29.33333%;
          height:auto;*/
          margin-right:5.99999%;
        }
        img:last-child{
          margin-right:0;
        }
      }
      h5{
        font-size:28px;
        font-weight:bold;
        color:#fff;
        span{
          display:inline-block;
          width:30px;
          height:30px;
          margin:18px 11px 18px 0;
          line-height:30px;
          font-size:26px;
          text-align:center;
          background:rgba(239,189,36,1);
          border-radius:50%;
        }
      }
      .special{
        color:#C2C3F9;
      }
    }
  }

  .show-no-number{
    position:relative;
    z-index:99;
    /*margin-top:-212px;*/
  }
  .application-wrapper{
    display:flex;
    height:98px;
    line-height:98px;
    align-items:center;
    p{
      width:100%;
      height:98px;
      line-height:98px;
      font-size:36px;
      cursor:pointer;
      text-align:center;
      color:#2E3045;
      background:linear-gradient(180deg,rgba(238,212,135,1),rgba(214,163,84,1));
    }
  }

  .img-responsive{
    display:block;
    max-width:100%;
    height:auto;
  }
  .center-block{
    display:block;
    margin:0 auto;
  }

  .not-whole-width{
    width:85.92%;
    margin-bottom:-18px;
  }

  .active-ct{
    position:relative;
    width:83vw;
    margin:0 auto;
    /*background:#1E213C;*/
    .content{
      /*background:#1E213C;*/
      /*margin:0 auto;*/
      /*width:602px;*/
      /*width:92vw;*/
      /*height:66.6vh;*/
      /*height:105.33vw;*/
      padding:32px 16px 0;
      margin-bottom:22px;
      -webkit-overflow-scrolling: touch;
      overflow:auto;
      img{
        display:block;
        width:100%;
        min-height:500px;
        height:auto;
        border-radius:6px;
      }
    }
    .close{
      position:absolute;
      z-index:9999;
      width:100%;
      bottom:160px;
      /*margin-top:-390px;*/
      cursor:pointer;
      p{
        margin-bottom:44px;
        font-size:40px;
        color:#38383E;
        text-align:center;
        img{
          width:42px;
          height:42px;
          margin-right:20px;
          vertical-align:middle;
        }
      }
      >img{
        width:70.2%;
      }
    }
  }
  .cube-scroll-wrapper{
    background:transparent!important;
  }
  .cube-popup .cube-popup-mask{
    opacity:0.5;
    background-color:#000;
  }

















</style>
